<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main2"/>
    <g:set var="entityName" value="${message(code: 'activity.label', default: 'Activity')}"/>
    <title>活动管理</title>
    <asset:stylesheet src="mash/bower_components/fullcalendar/fullcalendar.min.css"/>
    <style>
    .fc-day-grid-event > .fc-content {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .fc-event-container {
        padding: 1px 0 !important;
    }

    .fc-event-container a {
        padding: 1px 0 !important;
    }

    .fc-basic-view tbody .fc-row {
    }

    .time-list {
        padding: 6px 20px;
    }

    .time-list p {
        margin: 5px 0;
    }

    .fc-event-container a {
        border-color: transparent;
    }
    </style>
</head>

<body>
<div class="main-body">
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="page-header-title">
                <h4>团队日历</h4>
            </div>

            <div class="page-header-breadcrumb">
                <ul class="breadcrumb-title">
                    <li class="breadcrumb-item">
                        <a href="/salesDashboard/index">
                            <i class="icofont icofont-home"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item">团队日历</li>
                </ul>
            </div>
        </div>
        <!-- Page-header end -->
        <!-- Page-body start -->
        <div class="page-body">

            <div class="card">
                <div class="card-header">
                    <h5>团队日历</h5>

                    <div class="card-header-right">
                        <i class="icofont icofont-rounded-down"></i>
                    </div>
                </div>

                <div class="card-block">
                    <div id="calendar"></div>

                </div>
            </div>
        </div>

    </div>
</div>


<asset:javascript src="mash/bower_components/moment/min/moment.min.js"/>
<asset:javascript src="mash/bower_components/fullcalendar/fullcalendar.min.js"/>
<asset:javascript src="mash/bower_components/fullcalendar/zh-cn.js"/>

<script>
    $(function () {
        $('#calendar').fullCalendar({
            eventLimit: true,
            monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            editable: false,
            events: [
                <g:each in="${activityTeamList}">
                {
                    title: '${it?.activity.assignedTo?.fullName}-${it?.activity?.name}-${it?.activity.contact?.fullName}',
                    start: '<g:formatDate date="${it?.activity.startTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>',
                    end: '<g:formatDate date="${it?.activity.endTime}" format="yyyy-MM-dd HH:mm:ss"></g:formatDate>',
                    backgroundColor: '<g:if test="${new Date(it?.activity?.startTime.getTime()).format("yyyy-MM-dd") == new Date().format("yyyy-MM-dd")}">#FF0000</g:if><g:else><g:if test="${it?.activity.status == "已完成"}">#4CAF50</g:if><g:if test="${it?.activity.status == "未执行"}">#e78170</g:if><g:if test="${it?.activity.status == "已推迟"}">#f0ad4e</g:if><g:if test="${it?.activity.status == "已取消"}">#3498db</g:if></g:else>',
                    url: "/activity/show/" + ${it?.activity?.id}
                },
                </g:each>
            ],
        });

    });

    function getColor() {
        var colorArray = ['5c7b98', '#3498db', '#f0ad4e', '#e78170', '#4CAF50'];
        var n = Math.floor(Math.random() * colorArray.length + 1) - 1;
        return colorArray[n];
    };
</script>
</body>

</html>
